<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
	<link th:replace="fragment/common_edit_header" />
	<link th:href="@{/js/plugin/jsoneditor/jsoneditor.min.css}" rel="stylesheet" />
	<title>路由详情</title>
	<style type="text/css">
		pre {
	        border: 1px solid #aaa;
	        background-color: #FFF;
	        font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	    }
	</style>
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content ">
		<div class="row">
			<form role="form" id="form" method="post">
				<input type="hidden" id="formId" th:value="${obj?.id}" />
				<input type="hidden" id="namespace" th:value="${obj?.namespace}" />
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<div class="form-group">
						<label for="id">id<em>*</em></label>
						<input class="form-control input-sm" type="text" name="id" id="id" 
							th:value="${obj?.id}" readonly="readonly" />
					</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<div class="form-group">
						<label for="order">order<em>*</em></label>
						<input class="form-control input-sm" type="text" name="order" id="order" readonly="readonly" />
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="form-group">
						<label for="uri">uri<em>*</em></label>
						<input class="form-control input-sm" type="text" name="uri" id="uri" readonly="readonly" />
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="form-group">
						<label>predicates</label>
						<pre id="predicates"></pre>
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="form-group">
						<label>filters</label>
						<pre id="filters"></pre>
					</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<div class="form-group">
						<label>metadata</label>
						<pre id="metadata"></pre>
					</div>
				</div>
			</form>
		</div>
	</div>
	
<script th:replace="fragment/common_edit_js"></script>
<script th:src="@{/js/plugin/jsoneditor/jsoneditor.min.js}"></script>
<script type="text/javascript">
$(function() {
	
	var jsonEditorOptions = {
		mode: 'code',
        mainMenuBar: false,
        modes: ['code']
	}
	
	var predicatesEditor = new JSONEditor(document.getElementById('predicates'), jsonEditorOptions, []);
	var filtersEditor = new JSONEditor(document.getElementById('filters'), jsonEditorOptions, []);
	var metadataEditor = new JSONEditor(document.getElementById('metadata'), jsonEditorOptions, {});
	
	var id = $('#formId').val();
	
	
	if(id != '') {
		
		var namespace = $('#namespace').val();
		
		var data = {namespace: namespace, id: id};
		
		$.request({
			type: 'post',
			url: 'router/get',
			data: JSON.stringify(data),
			success: function(result) {
				var router = result.data;
				if(router == null) {
					return ;
				}
				
				$('#order').val(router.order);
				$('#uri').val(router.uri);
				
				predicatesEditor.set(router.predicates);
				filtersEditor.set(router.filters);
				metadataEditor.set(router.metadata);
				
			}
		});
		
	}
	
});
</script>
</body>
</html>
